<template>
  <div class="all">
    <form method="post" style="text-align: center">
      <h1>收货人信息</h1>
      <label for="name">姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名：</label>
      <input
        type="text"
        name="name"
        placeholder="请输入姓名"
        v-model="formInline.name"
      />
      <br/>

      <label for="phoneNumber">电话号码：</label>
      <input
        type="text"
        name="phoneNumber"
        placeholder="请输入手机号"
        v-model="formInline.phoneNumber"
      />
      <br/>

      <label for="address"
      >地&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;址：</label
      >
      <input
        type="text"
        name="address"
        placeholder="请输入地址"
        v-model="formInline.address"
      />
      <br/>

      <label v-show="this.$route.query.addr_cnumber" for="cNumber"
      >快递单号：</label
      >
      <input
        type="text"
        name="cNumber"
        v-show="this.$route.query.addr_cnumber"
        placeholder="请输入快递单号"
        v-model="formInline.cNumber"
      />
      <br/>
      <input class="action" type="button" value="确定" @click="goOrder" />
<!--      <button type="button" class="action" >确定</button>-->
    </form>
  </div>
</template>

<script>
  import {modifyOrderMerchant2} from "../api/merchant";
  import axios from "axios";

  export default {
    data() {
      return {
        formInline: {
          name: this.$route.query.addr_oname,
          phoneNumber: this.$route.query.addr_ophone,
          address: this.$route.query.addr_oaddress,
          cNumber: this.$route.query.addr_cnumber,
        },
      };
    },
    methods: {
      goOrder() {

        this.modifyOrderMerchant2();

      },
      modifyOrderMerchant2() {
        const _this = this;
        modifyOrderMerchant2({
          uid: this.$route.query.addr_uid,
          gid: this.$route.query.addr_gid,
          mid: this.$route.query.addr_mid,
          oName: this.formInline.name,
          oPhone: this.formInline.phoneNumber,
          oAddress: this.formInline.address,
          // cNumber: this.formInline.cNumber,
          cNumber: typeof (this.formInline.cNumber) == "object" ? '' : this.formInline.cNumber,
        }).then((result) => {
          _this.$router.push({
            name: "order",
          });
          // that.tableData = res.data.data;
          // console.log("state", result);
        });
      },
    },
  };
</script>

<style scoped>
  .all {
    margin-top: 100px;
  }

  input[type="text"] {
    width: 30%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
  }

  input[type="submit"],
  .action {
    width: 15%;
    background-color: #4caf50;
    color: white;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }

  input[type="submit"]:hover {
    background-color: #45a049;
  }

  .action:hover {
    background-color: #45a049;
  }

  div {
    border-radius: 5px;
    background-color: #f2f2f2;
    padding: 20px;
    text-align: center;
  }
</style>
